<template>
    <div class="box">
        <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>确认订单</p>
         
     </header>
     <main>
         <div>
             <p>外卖配送</p>
             <dl>{{users.address}}</dl>
             <div class="song">
                 <p>立即送出</p>
                 <p style="color:blue">45分钟之后送达</p>
             </div>
         </div>
         <div>
             <ul>
                  <li v-for="item,i in car" :key="i">
                                <img :src="$image+item.food_img" alt="">
                                <div class="qian">
                                    <p>{{item.name}}</p>
                                     <p><i style="font-size:10px" class="iconfont">&#xe621;</i>{{1}}</p>
                                </div>
                               <div class="suan" @click="deletes($event,i)">
                                    <!-- <van-icon name="minus" size="20px" color="#0000f8" /> -->
                                    <i style="color:red;font-size:10px;font-style:normal;">￥<span style="font-size:15px">{{item.price}}</span></i>
                                   
                                    <!-- <van-icon name="add" size="20px" color="#0000f8" /> -->
                                </div>
                    </li>
             </ul>
         </div>
         <div class="xia">
             <p>
                 <i>备注</i>
                 <i>点击可以选择无接触配送</i>
             </p>
             <p>
                 <i>餐具份数</i>
                 <i>点击可以选择无接触配送</i>
             </p>
             <p>
                 <i>发票</i>
                 <i>点击可以选择无接触配送</i>
             </p>
         </div>
     </main>
     <footer>
         <van-submit-bar :price="zong" button-text="提交订单" @submit="onSubmit" />
     </footer>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name: '',
    data(){
        return{
        //   money:3050,
        }
    },
    methods:{
        back(){
            this.$router.push('/')
        },
        onSubmit(){
            this.$router.push('/shouYin');
        }
    },
    computed:{
       ...mapState(['car','users']),
       zong(){
            if(this.car.length>0){
                var money=0;
                this.car.forEach(item => {
                    money+=Math.floor(item.price);
                });
                // console.log(money);
                return money*100;
            }
           
        },
    },
    created(){
        // console.log(this.users)
    }
}
</script>

<style scoped>
.box{
    height: 100vh;
    background-image: linear-gradient(white 4%,rgb(174, 0, 255) 20%,rgb(248, 247, 247) 50%);
}
header{
    position: relative;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    color: white;
    background-image: linear-gradient(to left top,rgba(228, 100, 26, 0.884),rgba(174, 0, 255, 0.575),rgba(4, 0, 255, 0.747));
}
header>i{
  position: absolute;
  left: 5vw;
}
footer{
    position: fixed;
    bottom: 0;
    z-index: 10000;
}
main{
    padding: 2vw;
    width: 96vw;
    margin: 0 auto;
}
main>div{
    width: 92vw;
    background-color: white;
    border-radius: 5px;
    padding: 2vw;
    margin-bottom: 2vw;
}
dl{
    font-size: 15px;
    margin: 2vw 0;
    font-family: "方正小体";
    font-weight: 600;

}
.song{
    display: flex;
   
    justify-content: space-between;
}
.song>p{
 font-size: 12px;
    font-family: "黑体";
}
ul{
    /* position:fixed;
    left: 0;
    bottom: 7.3vh; */
    width: 100%;
    background-color: white;
    padding: 2vw;
    width: 90vw;
    border-radius: 3px;
}
ul li{
    display: flex;
    margin: 2vw 0;
    /* justify-content: space-between; */
}
img{
    width: 14vw;
    height: 14vw;
    border-radius: 5px;
}
li>.qian{
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    align-content: space-between;
}
.qian>p{
    font-size: 14px;
    width: 60vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 3vw;
}
.suan{
    display: flex;
    width: 23vw;
    margin-top: 4vw;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 2vw; */
}
.xia>p{
    display: flex;
    justify-content: space-between;
    margin: 1.5vw 0;
}
.xia>p>i:first-child{
    font-size: 13px;
    font-family: "黑体";
    font-weight: 500;
    font-style: normal;
}
.xia>p>i:last-child{
    font-size: 13px;
    font-family: "宋体";
    /* font-weight: 500; */
    font-style: normal;
}
</style>